<template>
<div>

<el-table
    :data="tableData"
    row-key="id"
    border
    default-expand-all>
    <el-table-column
      prop="name"
      label="姓名"
      width="250">
    </el-table-column>
    <el-table-column
      prop="href"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="sort"
      align="center"
      width="70"
      label="排序">
    </el-table-column>
    <el-table-column
      align="center"
      width="70"
      label="显示">
      	<template slot-scope="scope">
      		<span v-if="scope.row.isshow == '1'">显示</span>
      		<span v-else>隐藏</span>
      	</template>
    </el-table-column>
    <el-table-column
      width="150"
      align="center"
      label="操作">
      	<template slot-scope="scope">
      		<el-button type="primary" size="mini" icon="el-icon-edit" circle
      		@click="edit(scope.row)"
      		></el-button>
			<el-button type="success" size="mini" icon="el-icon-plus" circle
			@click="create(scope.row)"
			></el-button>
			<el-button type="danger" size="mini" icon="el-icon-minus" circle
			@click="del(scope.row)"
			></el-button>
      	</template>
    </el-table-column>
</el-table>

<el-dialog
  title="菜单"
  :visible.sync="dialogVisible"
  width="500px"
  >
	<el-form ref="form" :model="form" label-width="120px">
		<el-form-item label="菜单名称：">
			<el-input v-model="form.name" class="w1"></el-input>
		</el-form-item>
		<el-form-item label="地址：">
			<el-input v-model="form.href" class="w1"></el-input>
		</el-form-item>
		<el-form-item label="图标：">
			<el-input v-model="form.icon" class="w1"></el-input>
		</el-form-item>
		<el-form-item label="特殊资源：">
			<el-radio-group v-model="form.isshow">
				<el-radio label="1">显示</el-radio>
				<el-radio label="0">隐藏</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="排序：" >
			<el-input v-model="form.sort" class="w1"></el-input>
		</el-form-item>
	</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>


export default {
	
	name : 'menuconfig',
	
	data () {
		return {
		  	tableData : [],

		  	dialogVisible : false,

		  	form : {},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		async init () {
			const res = await this.$http('menuConfigList');
			this.tableData = this.$util.transData(res, 'id', 'pid', 'children');
		},

		edit (item) {
			this.form = Object.assign({}, item);
			this.dialogVisible = true;
		},

		create (item) {
			this.form = {
		  		isshow : '1',
		  		pid : item.id,
                sort : 0,
		  	};
		  	this.dialogVisible = true;
		},

		async save () {
			const res = await this.$http('createMenu', this.form);
			if(res){
				this.$message.success('操作成功');
				this.dialogVisible = false;
				this.init();
			}
		},

		del (item) {
			this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.form = {
					id : item.id,
					del : '1',
				}
				this.save();
			}).catch(() => {
				        
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
